<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title>NOTIFICATION</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list id="list">
    <ion-item-group>
      <ion-item-divider>
        <ion-label slot="start" style="padding-right: 10px;">
          <p> System Notification </p>
        </ion-label>
      </ion-item-divider>
      <ion-item-divider>
        <ion-label slot="end">
         <!--  <ion-button (click)="cleanList()"> clean </ion-button> -->
          <p> Total : {{totalNotification}} </p>
        </ion-label>
      </ion-item-divider>
      <ion-item lines="full" *ngFor="let detail of list">
        <ion-avatar slot="start">
          <div style="width: 100%;height: 100%;border: 1px black solid;">

          </div>
        </ion-avatar>
        <ion-label slot="">
          <h2>{{detail}}</h2>
        </ion-label>
      </ion-item>
    </ion-item-group>
  </ion-list>

</ion-content>